<!--产品包装维护信息表-->
<template>
  <div class="table-wrapper w-100">
    <div class="title rounded shadow-harsh pv-10">
      产品包装维护信息表

      <div class="search">

        <el-popover
          placement="bottom"
          trigger="click">

          <div class="flex-row">
            <el-button size="mini" type="success" @click="handleAdd()">新增</el-button>
            <loader tableName="pack_maintain" apiName="packMaintain"></loader>
            <exporter tableName="pack_maintain"></exporter>

          </div>
          <i slot="reference" class="el-icon-more mr-10"></i>
        </el-popover>

          <el-checkbox
            v-for="(ele, index) in cateName" v-model="ele.status"
            :key="index"
          >{{ ele.name }}</el-checkbox>

        <el-input
          style="margin-left: 10px"
          v-model="search"
          size="mini"
          placeholder="输入产品名称关键字搜索" />
      </div>

    </div>
    <div class="mt-30">

      <!--    通过字段进行 filter-->
<!--      :cell-style="{borderColor: 'grey'}"-->
      <el-table

        :fit="true"
        :v-loading="loading"
        height="450px"
        class="w-100 rounded shadow-harsh p-5"
        :data="tableData.filter(data => !search || data.serialName.toLowerCase().includes(search.toLowerCase())).slice((currentPage-1)*10,currentPage*10)">

        <el-table-column
          type="index"
          width="50">
        </el-table-column>

        <el-table-column
          align="center"
          v-for="(category, index) in filterCategories"
          :label="category.ct_name" :key="index">

        <el-table-column
          align="center"
          v-for="(group, index) in category.ct_values"
          :label="group.gp_name" :key="index">

          <el-table-column
            v-for="(item, index) in group.gp_values"
            :prop="item.prop"
            :label="item.label"
            sortable show-overflow-tooltip
            align="center"
            :width="item.type === 'datetime' ? 180 : 100"
            :key="index">

            <template scope="scope" v-if="item.type=== 'datetime'">
              <el-date-picker
                style="width: 80%;"
                v-if="scope.$index === editIndex"
                v-model="scope.row[item.prop]"
                type="date"
                size="small"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
              <span style="color: #4f7ff9" v-else>{{ scope.row[item.prop] }}</span>
            </template>

            <template scope="scope" v-else-if="item.type=== 'fixed'">
              <span>{{ scope.row[item.prop] }}</span>
            </template>

            <template scope="scope" v-else>
              <el-input v-if="scope.$index === editIndex" size="small"
                        v-model="scope.row[item.prop]" placeholder="请输入内容">
              </el-input>
              <span v-else>{{ scope.row[item.prop] }}</span>
            </template>

          </el-table-column>
        </el-table-column>
        </el-table-column>



        <el-table-column width="160px" align="right">
          <template slot="header">

          </template>
          <template slot-scope="scope">
            <span v-if="scope.$index !== editIndex">
              <el-button
                size="mini"
                type="warning"
                @click="editIndex = scope.$index; imageUrl = ''">修改
              </el-button>

              <el-popconfirm
                @confirm="handleDelete(scope.$index, scope.row)"
                title="您确定要删除数据吗?">
                <el-button
                  slot="reference"
                  size="mini"
                  type="danger">删除
                </el-button>
              </el-popconfirm>

            </span>
            <span v-else>
            <el-button
              size="mini"
              type="success"
              @click="saveEdit(scope.$index, scope.row)">保存
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleCancel">取消
            </el-button>
            </span>


          </template>
        </el-table-column>

      </el-table>

      <el-pagination class="pagination"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-size="10"
                     :total="tableData.length"
                     layout="total, prev, pager, next, jumper">
      </el-pagination>


    </div>

  </div>
</template>

<script>
import loader from "./loader";
import exporter from "./exporter";

export default {
  name: "pack-maintain-table",
  components: {
    loader,
    exporter
  },

  mounted() {
    this.$api.getPackMaintain().then(res => {
      this.tableData = res.data["records"].sort((a, b) => {
        return a.productName - b.productName;
      });

      console.log(this.tableData)


      this.loading = false;
    });
  },
  computed: {
    filterCategories() {

      let visibleCategories = this.cateName.filter(ele => {
        return ele.status
      }).map(ele => {
        return ele.name
      })
      console.log(visibleCategories)
      return this.categories.filter(ele => {
        return visibleCategories.indexOf(ele.ct_name) !== -1
      })
    }
  },
  methods: {
    getTableIndexByIndex(index) {
      // 通过表的row index来获取表格数据中的row index 在 list 中使用要 -1
      return index + (this.currentPage - 1) * 10 + 1;
    },


    handleDelete(index, row) {
      console.log(index, row);
      this.$api.editPackMaintain("remove", row.id, row).then(res => {
        console.log(res);
        if (res["success"]) {
          let n = this.getTableIndexByIndex(index);
          console.log(n, this.tableData[n - 1]);
          this.tableData.splice(n - 1, 1);

          this.$message({
            message: "删除成功",
            type: "success",
            duration: 2000
          });
        }
      });
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
    },

    saveEdit(index, row) {

      let method = row.id ? "update" : "save";
      let o = {
        "id": row.id ? row.id : 0,
        "createTime": row. e,
        "updateTime": row. e,
        "serialName": row.serialName ? row.serialName : ' ',
        "productName": row.productName ? row.productName : ' ',
        "updateTimeOfProduct": row.updateTimeOfProduct ? row.updateTimeOfProduct : ' ',
        "updateReason": row.updateReason ? row.updateReason : ' ',
        "maintainer": row.maintainer ? row.maintainer : ' ',
        "outerNetWeight": row.outerNetWeight ? row.outerNetWeight : ' ',
        "outerMaterial": row.outerMaterial ? row.outerMaterial : ' ',
        "outerThickness": row.outerThickness ? row.outerThickness : ' ',
        "outerFilmWidth": row.outerFilmWidth ? row.outerFilmWidth : ' ',
        "outerProductSize": row.outerProductSize ? row.outerProductSize : ' ',
        "outerBagType": row.outerBagType ? row.outerBagType : ' ',
        "outerPrintArt": row.outerPrintArt ? row.outerPrintArt : ' ',
        "outerSealArt": row.outerSealArt ? row.outerSealArt : ' ',
        "outerOpenDirection": row.outerOpenDirection ? row.outerOpenDirection : ' ',
        "hangingDiameter": row.hangingDiameter ? row.hangingDiameter : ' ',
        "hangingLocation": row.hangingLocation ? row.hangingLocation : ' ',
        "airHoleDiameter": row.airHoleDiameter ? row.airHoleDiameter : ' ',
        "codeLocation": row.codeLocation ? row.codeLocation : ' ',
        "outerExecuteStandard": row.outerExecuteStandard ? row.outerExecuteStandard : ' ',
        "productNumber": row.productNumber ? row.productNumber : ' ',
        "outerConfirmTime": row.outerConfirmTime ? row.outerConfirmTime : ' ',
        "outerProductionCompany": row.outerProductionCompany ? row.outerProductionCompany : ' ',
        "fileName": row.fileName ? row.fileName : ' ',
        "excipientsId": row.excipientsId ? row.excipientsId : ' ',
        "suitabilityAssessment": row.suitabilityAssessment ? row.suitabilityAssessment : ' ',
        "innerPackageName": row.innerPackageName ? row.innerPackageName : ' ',
        "packageNumAndNetWeight": row.packageNumAndNetWeight ? row.packageNumAndNetWeight : ' ',
        "innerMaterial": row.innerMaterial ? row.innerMaterial : ' ',
        "innerThickness": row.innerThickness ? row.innerThickness : ' ',
        "innerFilmWidth": row.innerFilmWidth ? row.innerFilmWidth : ' ',
        "innerProductSize": row.innerProductSize ? row.innerProductSize : ' ',
        "innerBagType": row.innerBagType ? row.innerBagType : ' ',
        "innerPrintArt": row.innerPrintArt ? row.innerPrintArt : ' ',
        "innerSealArt": row.innerSealArt ? row.innerSealArt : ' ',
        "innerOpenDirection": row.innerOpenDirection ? row.innerOpenDirection : ' ',
        "innerExecuteStandard": row.innerExecuteStandard ? row.innerExecuteStandard : ' ',
        "innerConfirmTime": row.innerConfirmTime ? row.innerConfirmTime : ' ',
        "innerProductionCompany": row.innerProductionCompany ? row.innerProductionCompany : ' ',
        "length": row.length ? row.length : ' ',
        "width": row.width ? row.width : ' ',
        "height": row.height ? row.height : ' ',
        "perVolume": row.perVolume ? row.perVolume : ' ',
        "innerAndOuterDiameter": row.innerAndOuterDiameter ? row.innerAndOuterDiameter : ' ',
        "boxStandard": row.boxStandard ? row.boxStandard : ' ',
        "boxNetWeight": row.boxNetWeight ? row.boxNetWeight : ' ',
        "grossWeight": row.grossWeight ? row.grossWeight : ' ',
        "boxNumber": row.boxNumber ? row.boxNumber : ' ',
        "boxId": row.boxId ? row.boxId : ' ',
        "boxPrintArt": row.boxPrintArt ? row.boxPrintArt : ' ',
        "boxMaterial": row.boxMaterial ? row.boxMaterial : ' ',
        "boxConfirmTime": row.boxConfirmTime ? row.boxConfirmTime : ' ',
        "boxProductionCompany": row.boxProductionCompany ? row.boxProductionCompany : ''
      }

      console.log("保存", row.id, index, row, o);
      this.$api.editPackMaintain(method, row.id ? row.id : 0, o).then(res => {
        console.log(res);
        this.$message({
          message: "保存成功",
          type: "success",
          duration: 2000
        });

        this.$set(this.tableData, this.getTableIndexByIndex(index) - 1, res.data.data);
        // this.tableData[this.getTableIndexByIndex(index)-1] = res.data['shapeDesc']
        this.editIndex = null;
      });

    },
    handleCancel: function() {
      this.editIndex = null;
      this.tableData = this.tableData.filter(ele => {
        return ele.serialName !== "*";
      });
    },
    handleAdd: function() {
      /*
      * 新增列按照 name * 来识别
      * */

      // 去除之前操作的痕迹
      this.imageUrl = "";
      this.tableData = this.tableData.filter(ele => {
        return ele.serialName !== "*";
      });

      this.tableData.push({ "serialName": "*" });
      let nums = this.tableData.length;
      console.log(Math.floor((nums - 1) / 10) + 1);
      this.currentPage = Math.floor((nums - 1) / 10) + 1;

      this.editIndex = nums % 10 === 0 ? 9 : nums % 10 - 1;
    }

  },

  data() {
    return {
      tableData: [],
      search: "",
      currentPage: 1,
      loading: true,
      editIndex: null,


      cateName: [{
        name: '-',
        status: true
      }, {
        name: '外包装',
        status: true
      }, {
        name: '内包装',
        status: true
      }, {
        name: '外箱',
        status: true
      }],

      imageUrl: "",
      visible: false,

      categories: [
        {
        "ct_name": '-',
        "ct_values": [
          {
            "gp_name": '基本信息',
            "gp_values": [
            //   {
            //   "label": "",
            //   "prop": "id",
            //   "type": "String"
            // },
              {
                "label": "创建时间",
                "prop": "createTime",
                "type": "fixed"
              },
              {
                "label": "更新时间",
                "prop": "updateTime",
                "type": "fixed"
              },
              {
                "label": "系列名称",
                "prop": "serialName",
                "type": "String"
              },
              {
                "label": "产品名称",
                "prop": "productName",
                "type": "String"
              },
              {
                "label": "产品维护时间",
                "prop": "updateTimeOfProduct",
                "type": "datetime"
              },
              {
                "label": "更新原因、内容",
                "prop": "updateReason",
                "type": "String"
              },
              {
                "label": "维护人",
                "prop": "maintainer",
                "type": "String"
              }]
          }
        ]
      },
        {
          "ct_name": '外包装',
          "ct_values": [
            {
              "gp_name": "产品信息",
              "gp_values": [{
                "label": "净含量",
                "prop": "outerNetWeight",
                "type": "String"
              },
                {
                  "label": "材质",
                  "prop": "outerMaterial",
                  "type": "String"
                },
                {
                  "label": "厚度（S）",
                  "prop": "outerThickness",
                  "type": "String"
                },
                {
                  "label": "膜宽（mm)",
                  "prop": "outerFilmWidth",
                  "type": "String"
                },
                {
                  "label": "成品尺寸（mm)",
                  "prop": "outerProductSize",
                  "type": "String"
                },
                {
                  "label": "袋型",
                  "prop": "outerBagType",
                  "type": "String"
                }]
            },{
              "gp_name": "印刷信息",
              "gp_values": [{
                "label": "印刷工艺",
                "prop": "outerPrintArt",
                "type": "String"
              },
                {
                  "label": "压封工艺（mm)",
                  "prop": "outerSealArt",
                  "type": "String"
                },
                {
                  "label": "开口方向",
                  "prop": "outerOpenDirection",
                  "type": "String"
                },
                {
                  "label": "挂孔直径（mm）",
                  "prop": "hangingDiameter",
                  "type": "String"
                },
                {
                  "label": "挂孔位置",
                  "prop": "hangingLocation",
                  "type": "String"
                },
                {
                  "label": "透气孔直径（mm）",
                  "prop": "airHoleDiameter",
                  "type": "String"
                },
                {
                  "label": "打码位置",
                  "prop": "codeLocation",
                  "type": "String"
                },
                {
                  "label": "执行标准",
                  "prop": "outerExecuteStandard",
                  "type": "String"
                },]
            },{
              "gp_name": "条码信息",
              "gp_values": [{
                "label": "产品条码",
                "prop": "productNumber",
                "type": "String"
              }]
            },{
              "gp_name": "制作信息",
              "gp_values": [{
                "label": "定版时间",
                "prop": "outerConfirmTime",
                "type": "datetime"
              },
              {
                "label": "制作公司",
                "prop": "outerProductionCompany",
                "type": "String"
              }]
            },{
              "gp_name": "辅料标准",
              "gp_values": [ {
                "label": "文件名称",
                "prop": "fileName",
                "type": "String"
              },
                {
                  "label": "编号",
                  "prop": "excipientsId",
                  "type": "String"
                },]
            },{
              "gp_name": "验证信息",
              "gp_values": [    {
                "label": "上机适配性评估",
                "prop": "suitabilityAssessment",
                "type": "String"
              }]
            }
          ]
        },

        {
          "ct_name": '内包装',
          "ct_values": [
            {
              "gp_name": "产品信息",
              "gp_values": [    {
                "label": "内包装名称",
                "prop": "innerPackageName",
                "type": "String"
              },
                {
                  "label": "分包数量/净含量",
                  "prop": "packageNumAndNetWeight",
                  "type": "String"
                },
                {
                  "label": "材质",
                  "prop": "innerMaterial",
                  "type": "String"
                },
                {
                  "label": "厚度（S）",
                  "prop": "innerThickness",
                  "type": "String"
                },
                {
                  "label": "膜宽（mm)",
                  "prop": "innerFilmWidth",
                  "type": "String"
                },
                {
                  "label": "成品尺寸（mm)",
                  "prop": "innerProductSize",
                  "type": "String"
                },
                {
                  "label": "袋型",
                  "prop": "innerBagType",
                  "type": "String"
                }]
            }, {
              "gp_name": "印刷信息",
              "gp_values": [
                {
                  "label": "印刷工艺",
                  "prop": "innerPrintArt",
                  "type": "String"
                },
                {
                  "label": "压封工艺（mm)",
                  "prop": "innerSealArt",
                  "type": "String"
                },
                {
                  "label": "开口方向",
                  "prop": "innerOpenDirection",
                  "type": "String"
                },
                {
                  "label": "执行标准",
                  "prop": "innerExecuteStandard",
                  "type": "String"
                }]
            }, {
              "gp_name": "制作信息",
              "gp_values": [{
                "label": "定版时间",
                "prop": "innerConfirmTime",
                "type": "datetime"
              },
                {
                  "label": "制作公司",
                  "prop": "innerProductionCompany",
                  "type": "String"
                }]
            }
          ]
        },

        {
          "ct_name": '外箱',
          "ct_values": [
            {
              "gp_name": '外箱尺寸',
              "gp_values": [ {
                "label": "长（mm）",
                "prop": "length",
                "type": "String"
              },
                {
                  "label": "宽（mm）",
                  "prop": "width",
                  "type": "String"
                },
                {
                  "label": "高（mm）",
                  "prop": "height",
                  "type": "String"
                },
                {
                  "label": "单位体积(m²)",
                  "prop": "perVolume",
                  "type": "String"
                },
                {
                  "label": "内外径尺寸",
                  "prop": "innerAndOuterDiameter",
                  "type": "String"
                },]
            },
            {
              "gp_name": '规格',
              "gp_values": [ {
                "label": "装箱规格",
                "prop": "boxStandard",
                "type": "String"
              },
                {
                  "label": "净重(kg)",
                  "prop": "boxNetWeight",
                  "type": "String"
                },
                {
                  "label": "毛重(kg)",
                  "prop": "grossWeight",
                  "type": "String"
                },]
            },
            {
              "gp_name": '编码',
              "gp_values": [ {
                "label": "外箱条码",
                "prop": "boxNumber",
                "type": "String"
              },
                {
                  "label": "外箱编码",
                  "prop": "boxId",
                  "type": "String"
                },]
            },
            {
              "gp_name": '制作信息',
              "gp_values": [    {
                "label": "印刷工艺",
                "prop": "boxPrintArt",
                "type": "String"
              },
                {
                  "label": "材质",
                  "prop": "boxMaterial",
                  "type": "String"
                },
                {
                  "label": "定版时间",
                  "prop": "boxConfirmTime",
                  "type": "datetime"
                },
                {
                  "label": "制作公司",
                  "prop": "boxProductionCompany",
                  "type": "String"
                }]
            }
          ]
        }



      ]
    }
  }
};
</script>

<style scoped>


.avatar-uploader .el-upload {
  border: 1px dashed #616161;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 10px;
  color: #8c939d;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}

.avatar {
  width: 40px;
  height: 40px;
}
</style>